<template>
  <div class="detail-container">
    <div class="left">
      <div class="left-top">
        <div class="header c-m-l-20" @click="$router.back(-1)">
          <i class="el-icon-arrow-left c-font-b"></i>
          <span>意见详情</span>
        </div>
        <!--        表单区域-->
        <div class="form">
          <el-form ref="form" v-model="detailForm" label-width="100px">
            <el-form-item label="反馈人:">
              <span>{{ detailForm.nickname }}</span>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
              <span v-if="detailForm.status === 0"> 审核中</span>
              <span v-else-if="detailForm.status === 1">处理中 </span>
              <span v-else-if="detailForm.status === 2">已完结 </span>
            </el-form-item>
            <el-form-item label="创建时间:" prop="createTime">
              <span>{{ detailForm.createTime }}</span>
            </el-form-item>
            <el-form-item label="反馈区域:" prop="canteenName">
              <span>{{ detailForm.canteenName }}</span>
            </el-form-item>
            <el-form-item label="反馈类型:" prop="typeName">
              <span>{{ detailForm.typeName }}</span>
            </el-form-item>
            <el-form-item label="反馈内容:" prop="content">
              <span>{{ detailForm.content }}</span>
            </el-form-item>
            <el-form-item label="图片:" prop="images">
              <el-image
                v-for="(item, index) in detailForm.attachmentUrls"
                :src="item"
                :key="index"
                style="width: 200px; height: 160px; margin-right: 10px"
              ></el-image>
            </el-form-item>
            <el-form-item label="反馈渠道:" prop="channelName">
              <span>{{ detailForm.channelName }}</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="left-bottom">
        <div class="header">
          <span class="c-font-20 c-font-b c-m-l-20">历史记录</span>
        </div>
        <el-table
          ref="multipleTable"
          :header-cell-style="{ background: '#FEF6F6' }"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column label="反馈人" prop="nickname"></el-table-column>
          <el-table-column label="完成时间" prop="createTime"></el-table-column>
          <el-table-column
            label="描述"
            prop="handleMessage"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="反馈结果" prop="handleType">
            <template #default="scope">
              <el-tag size="small" v-if="scope.row.handleType === 0"
                >审核中</el-tag
              >
              <el-tag size="small" v-else-if="scope.row.handleType === 1"
                >处理中</el-tag
              >
              <el-tag size="small" v-else-if="scope.row.handleType === 2"
                >已完结</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="服务评分" prop="socore">
            <template #default="scope">
              <el-rate
                disabled
                v-model="scope.row.score"
                size="large"
                text-color="#ff9900"
              ></el-rate>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="result">
            <template #default="scope">
              <el-button
                icon="el-icon-view"
                @click="look(scope.row)"
                size="small"
                type="text"
                >查看
              </el-button>
              <TsButton
                size="small"
                label="回复"
                perms="opinion:handler:reply"
                type="text"
                icon="el-icon-chat-line-square"
                v-show="scope.row.handleType === 2"
                @click="reply(scope.row.opinionId)"
                >回复</TsButton
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right; margin: 20px"
          @size-change="pageSizeChange"
          @current-change="pageCurrentChange"
          :current-page="pageNum"
          :page-size="pageSize"
          layout=" prev, pager, next"
          :total="totalNum"
          background
        >
        </el-pagination>
      </div>
    </div>
    <div class="right">
      <div class="process">
        <div class="header">
          <i class="el-icon-help" style="color: #d71820"></i>
          <span class="c-font-20 c-font-b c-m-l-10">流程足迹</span>
        </div>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in timeline"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
            :timestamp="activity.createTime"
          >
            处理人： {{ activity.handlerName }}
            <div>结果：{{ activity.handleMessage }}</div>
            <div>转办人：{{ activity.toHandlerName }}</div>
            <div v-if="activity.handleType === 0">状态：审核中</div>
            <div v-else-if="activity.handleType === 1">状态：处理中</div>
            <div v-else-if="activity.handleType === 2">状态：已完结</div>
            <div>处理时长：{{ activity.handleTimes }}</div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="score">
        <div class="header">
          <img src="@/assets/imgs/score.png" alt="" />
          <span class="c-font-20 c-font-b c-m-l-10">服务评分</span>
        </div>
        <div class="rate">
          <span>评分</span>
          <el-rate
            v-model="detailForm.score"
            size="small"
            disabled
            text-color="#ff9900"
          ></el-rate>
        </div>
        <div>
          <TsButton
            size="small"
            label="回复"
            perms="opinion:handler:reply"
            type="text"
            icon="el-icon-chat-line-square"
            @click="RightOptionReply"
            >回复</TsButton
          >
        </div>
      </div>
    </div>
    <!-- 回复对话框 -->
    <el-dialog v-model="replyDialogVisible" title="回复" width="30%">
      <span>
        <el-input
          type="textarea"
          placeholder="请输入回复内容"
          v-model="replyContent"
        ></el-input>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitReply" size="small"
            >确定</el-button
          >
          <el-button type="danger" @click="cancelSubmit" size="small"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import feedbackDetail from "@/composables/canteen/feedback-detail";
import commonPageRepository from "../../../composables/common-page-repository";

export default {
  name: "FeedbackDetail",
  setup() {
    const {
      tableData,
      detailForm,
      timeline,
      look,
      totalNum,
      pageSize,
      pageNum,
      getMyHistory,
      replyDialogVisible,
      replyContent,
      submitReply,
      reply,
      RightOptionReply,
    } = feedbackDetail();
    const { pageSizeChange, pageCurrentChange } = commonPageRepository(
      pageSize,
      pageNum,
      getMyHistory
    );
    return {
      pageSizeChange,
      pageCurrentChange,
      totalNum,
      pageSize,
      pageNum,
      detailForm,
      timeline,
      tableData,
      look,
      replyDialogVisible,
      replyContent,
      submitReply,
      reply,
      RightOptionReply,
    };
  },
};
</script>

<style scoped lang="scss">
.detail-container {
  margin: 20px 0;
  height: calc(100vh - 180px);
  display: flex;

  .left {
    display: flex;
    flex-direction: column;
    flex: 2;

    .left-top {
      padding: 10px 0;
      overflow-y: auto;
      background: #ffffff;
      border-radius: 6px;
      box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);

      .header {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #edeff3;
      }
    }

    .left-bottom {
      padding: 10px;
      background: #ffffff;
      margin-top: 20px;
      border-radius: 6px;
      height: 400px;
      overflow-y: auto;
      box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);

      .header {
        position: relative;
        margin-bottom: 10px;

        :after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 7px;
          height: 27px;
          background: #d71820;
        }
      }
    }
  }

  .right {
    flex: 1;
    background: #ffffff;
    margin-left: 20px;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);

    .header {
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;
      border-bottom: 1px solid #edeff3;
    }
    .process {
      height: 400px;
      overflow-y: auto;
    }
    .score {
      height: calc(100% - 400px);
      overflow-y: auto;
      .rate {
        display: flex;
        align-content: center;
        span {
          margin-right: 10px;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }
}

.el-form-item {
  margin-bottom: 0 !important;
}
</style>
